<template>
  <div>
      <!--  5、v-model：实现数据双向绑定
            作用：便捷的设置或获取表单元素的value属性值
            双向绑定：当js中的值改变能引起页面中的数据改变，当页面中的数据改变也能引起js中值的变化
            注意：使用v-model绑定表单的值后，不再关心初始化的value属性值-->
      <input type="text" v-model="name">
      <p>{{name}}</p>
<!--      v-model绑定单选钮：v-model的值等于哪个单选钮的value属性值，哪个就被选中-->
      <input type="radio" name="sex" v-model="sex" value="男">男
      <input type="radio" name="sex" v-model="sex" value="女">女
  </div>

</template>

<script>
export default {
    name: "表单绑定指令",
    data() {
        return {
            name: "admin",
            sex: "男"
        }
    }
}
</script>

<style scoped>

</style>